<template>
  <div>
    <div class="status">{{ status }}</div>
    <div class="board-row">
      <Square :value="1" />
      <Square :value="2" />
      <Square :value="3" />
    </div>
    <div class="board-row">
      <Square :value="4" />
      <Square :value="5" />
      <Square :value="6" />
    </div>
    <div class="board-row">
      <Square :value="7" />
      <Square :value="8" />
      <Square :value="9" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Square from "@/components/Square.vue";

@Component({
  components: { Square }
})
export default class Board extends Vue {
  // region Prop
  // endregion
  // region Data
  status = "Next Player:X";
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  // endregion
  // region hook
  // endregion
}
</script>

<style></style>
